/**
 * 预订车票
 * @email 626097912@qq.com
 * Created by dength on 2017/04/12
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Alert
} from 'react-native';
import BaseComponent from '../base/baseComponent';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';
import Buttom from '../common/Buttom';
import BindAccount from './customWindow/bindAccount';
import { getNavigator } from '../route/route';

class AdvanceBooking extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            currentState: '添加乘车人',
            showBindAccount: false,
        }
    }

    getNavigationBarProps() {
        return {
            title: '预订车票',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }

    //跳转方法
    _onPress(navname) {
        getNavigator().push({ name: navname });
    }

    onOpenBindAccount() {
        this.setState({
            showBindAccount: true
        });
    }

    onCloseBindAccount() {
        this.setState({
            showBindAccount: false
        });
    }

    renderState() {
        let { currentState, showBindAccount} = this.state;
        switch (currentState) {
            case '第一次登陆':
                return (
                    <View style={{ marginTop: 15 }}>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            style={styles.binding}>
                            <View style={styles.binding_box}>
                                <Text style={{ fontSize: 12, color: '#555555' }}>绑定12306账号</Text>
                                <Image style={{ width: 22, height: 19 }} source={require('../images/ic_advanceBooking_t.png')} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            style={[styles.binding, { marginTop: 1 }]}>
                            <View style={styles.binding_box}>
                                <Text style={{ fontSize: 12, color: '#555555' }}>添加/修改乘车人</Text>
                                <Image style={{ width: 22, height: 20 }} source={require('../images/ic_advanceBooking_b.png')} />
                            </View>
                        </TouchableOpacity>
                        <View style={styles.binding_buttom}>
                            <Buttom
                                //onPress={}
                                containerStyle={styles.buttom_box}
                                style={{ fontSize: 18, color: 'white' }}
                                text={'立即预订'}
                                />
                        </View>
                    </View>

                );
            case '绑定12306账号':
                return (
                    <View style={{ marginTop: 15 }}>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            style={styles.binding}>
                            <View style={styles.binding_box}>
                                <Text style={{ fontSize: 12, color: '#555555' }}>绑定12306账号</Text>
                                <Text style={{ fontSize: 10, color: '#FF900A' }}>切换账号</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            style={[styles.binding, { marginTop: 1 }]}>
                            <View style={styles.binding_box}>
                                <Text style={{ fontSize: 12, color: '#FF900A' }}>添加/修改乘车人</Text>
                                <Image style={{ width: 22, height: 20 }} source={require('../images/ic_advanceBooking_b.png')} />
                            </View>
                        </TouchableOpacity>
                        <View style={styles.binding_buttom}>
                            <Buttom
                                //onPress={}
                                containerStyle={styles.buttom_box}
                                style={{ fontSize: 18, color: 'white' }}
                                text={'立即预订'}
                                />
                        </View>
                    </View>

                );
            case '添加乘车人':
                return (
                    <View style={{ marginTop: 15 }}>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            onPress={this.onOpenBindAccount.bind(this)}
                            style={styles.binding}>
                            <View style={styles.binding_box}>
                                <Text style={{ fontSize: 12, color: '#555555' }}>绑定12306账号</Text>
                                <Text style={{ fontSize: 10, color: '#FF900A' }}>切换账号</Text>
                            </View>
                        </TouchableOpacity>
                        <View style={[styles.binding, { marginTop: 1, }]}>
                            <View style={styles.tianjia}>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.tianjia_lf}>
                                    <Image style={styles.tianjia_lf_img} source={require('../images/ic_advanceBooking_c.png')} />
                                </TouchableOpacity>
                                <View style={styles.tianjia_ce}>
                                    <View style={[styles.tianjia_ce_li, { alignItems: 'flex-start', }]}>
                                        <Text style={{ fontSize: 12, fontWeight: 'bold' }}>乘客姓名</Text>
                                        <View style={{ position: 'absolute', top: 5, left: 55 }}>
                                            <Text style={{ fontSize: 10 }}>成人票</Text>
                                        </View>
                                    </View>
                                    <View style={[styles.tianjia_ce_li, { alignItems: 'flex-start' }]}>
                                        <Text style={{ fontSize: 12 }}>43001****6698</Text>
                                    </View>
                                </View>
                                <View style={styles.tianjia_ce}>
                                    <View style={[styles.tianjia_ce_li, { alignItems: 'flex-end' }]}>
                                        <Text style={{ fontSize: 12, fontWeight: 'bold' }}>一等座</Text>
                                    </View>
                                    <View style={[styles.tianjia_ce_li, { alignItems: 'flex-end' }]}>
                                        <Text style={{ fontSize: 12 }}>￥603.5</Text>
                                    </View>
                                </View>

                            </View>
                        </View>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            onPress={() => this._onPress('AddUser')}
                            style={[styles.binding, { marginTop: 1 }]}>
                            <View style={styles.binding_box}>
                                <Text style={{ fontSize: 12, color: '#FF900A' }}>添加/修改乘车人</Text>
                                <Image style={{ width: 22, height: 20 }} source={require('../images/ic_advanceBooking_b.png')} />
                            </View>
                        </TouchableOpacity>
                        <View style={styles.binding_buttom}>
                            <Buttom
                                onPress={() => this._onPress('ScheduledSuccess')}
                                containerStyle={styles.buttom_box}
                                style={{ fontSize: 18, color: 'white' }}
                                text={'立即预订'}
                                />
                        </View>
                    </View >
                );
        }
    }

    renderBody() {
        let { showBindAccount} = this.state;
        return (
            <View style={styles.container}>
                <View style={{ marginTop: 15 }}>
                    <Image style={styles.Images_z}
                        source={require('../images/ic_advanceBooking.png')}
                        >
                        <View style={{ marginTop: 10, marginLeft: 30, marginRight: 30 }}>
                            <View style={[styles.box_tottom, { marginTop: 10 }]}>
                                <View style={styles.box_top_li}>
                                    <Text style={styles.box_top_tx}>2017年4月11日</Text>
                                </View>
                                <View style={{ width: (Constants.window.width - 60) / 3 - 18 - 20 }}></View>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_top_tx}>星期二</Text>
                                </View>
                            </View>
                            <View style={styles.box_center}>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_center_tx}>长沙南</Text>
                                </View>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_center_tx}>G6025</Text>
                                    <View style={styles.img_position}>
                                        <Image style={{ width: 50, height: 4 }} source={require('../images/ic_trainNumber_xian.png')} />
                                    </View>
                                </View>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_center_tx}>深圳北</Text>
                                </View>
                            </View>

                            <View style={styles.box_tottom}>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_tottom_tx}>18:16</Text>
                                </View>
                                <View style={styles.box_center_li}></View>
                                <View style={styles.box_center_li}>
                                    <Text style={styles.box_tottom_tx}>21:36</Text>
                                </View>
                            </View>
                        </View>
                    </Image>
                </View>

                {this.renderState()}

                <BindAccount
                    showBindAccount={showBindAccount}
                    onShowBindAccount={this.onOpenBindAccount.bind(this)}
                    onHideBindAccount={this.onCloseBindAccount.bind(this)}
                    />

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: CommonStyles.colors.background,
    },
    Images_z: {
        width: Constants.window.width, height: 110
    },
    box_top_tx: {
        fontSize: 13, color: '#000'
    },
    box_top_li: {
        width: (Constants.window.width - 60) / 3 + 16 + 20, alignItems: 'center', paddingLeft: 16,
    },
    box_center: {
        marginTop: 10, flexDirection: 'row', height: 25,
    },
    box_center_li: {
        width: (Constants.window.width - 60) / 3, alignItems: 'center',
    },
    box_center_tx: {
        color: '#000', fontSize: 19, fontWeight: 'bold'
    },
    box_tottom_tx: {
        color: '#000', fontSize: 12,
    },
    box_tottom: {
        flexDirection: 'row', height: 20,
    },
    img_position: {
        position: 'absolute', bottom: -3, right: ((Constants.window.width - 60) / 3 - 50) / 2
    },
    //第一次登陆，绑定12306账号，添加乘车人，复用样式
    binding: {
        width: Constants.window.width, paddingTop: 10, paddingBottom: 10, backgroundColor: 'white'
    },
    binding_box: {
        marginLeft: 15, marginRight: 15, flexDirection: 'row', justifyContent: 'space-between',
    },
    binding_buttom: {
        width: Constants.window.width, marginLeft: 30, marginRight: 30, marginTop: 20
    },
    //添加乘车人
    tianjia: {
        width: Constants.window.width - 30, marginLeft: 15, marginRight: 15, flexDirection: 'row',
    },
    tianjia_lf: {
        height: 40, justifyContent: 'center', width: 30, alignItems: 'flex-start'
    },
    tianjia_lf_img: {
        width: 22, height: 22
    },
    tianjia_ce: {
        height: 40, width: (Constants.window.width - 30 - 30) / 2
    },
    tianjia_ce_li: {
        height: 20, justifyContent: 'center',
    },
    //按钮样式
    buttom_box: {
        height: 47, backgroundColor: '#FF8B00', alignItems: 'center', justifyContent: 'center', width: Constants.window.width - 60, borderRadius: 10
    },
});

export default AdvanceBooking;